<template>
  <div class="wb-audio">
    <div ref="aplayer" class="wb-audio-css"></div>
  </div>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { commonUtils } from '@/components/utils/common-utils'
import { utils } from '@/components/utils/utils'
import { EventBus } from '@/store/index'
import { isJSON } from '@/plugins/utils'
import { getPxOVwByValue } from '@/store/utils'
import { mapGetters } from 'vuex'

const components = {
  InjectTemplate
}

export default {
  mixins: [commonUtils, utils],
  setup () {
    return {
      aplayer_: null,
    }
  },
  computed: {
    ...mapGetters({
      isSwiper: "isSwiper",
    }),
  },
  created() {
    if(!window.APlayer){
      this.dynamicsLoadScript(this.env.baseUrl + "js/APlayer.min.js?v=1", "APlayer", this.initAPlayer)
    }
    EventBus.$on("playOrPauseAudio", this.onPlayOrPause);
    EventBus.$on("switchAudio", this.onSwitchAudio);
  },
  components,
  mounted(){
    this.initAPlayer(window.APlayer);
  },
  methods: {
    initAPlayer(APlayer){
      if(!APlayer || this.aplayer_ || !this.$refs.aplayer){
        return
      }
      if(this.isSwiper && !(this.pageIndex >= 0 && this.statePopId <= 0 && this.pageId == (this.pageIndex+1) || this.statePopId > 0 && this.popId == this.statePopId)){
        return
      }
      let options = {
        container: this.$refs.aplayer,
        fixed: this.commonAttr.isFiexed,
        mini: this.commonAttr.isMini,
        autoplay: this.commonAttr.isAutoPlay,
        volume: this.commonAttr.volume,
        preload: 'auto',//'none', 'metadata', 'auto'
        theme: this.commonAttr.theme,
        loop: 'none',//音频循环播放, 可选值: 'all', 'one', 'none'
        // order: 'list',//音频循环顺序, 可选值: 'list', 'random'
        audio: [{
          name: this.item.commonAttr.name,
          artist: this.item.commonAttr.artist,
          url: this.item.commonAttr.url,
          cover: this.commonAttr.cover,
          theme: this.commonAttr.theme,
          lrc: this.commonAttr.lrc,//[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing //lrc.lrc
          // type: "hls",//'auto', 'hls', 'normal'
        }],
        mutex: true,
        // listFolded: false,
        // listMaxHeight:
        lrcType: this.commonAttr.lrc ? 3 : 2,//0
      }
      this.aplayer_ = new APlayer(options);
      // this.aplayer_.on('play', () => {
      //    this.aplayer_.play();
      // });
      // this.aplayer_.on('pause', () => {
      //    this.aplayer_.pause();
      // });
      // this.aplayer_.on('ended', () => {
      //    this.aplayer_.pause();
      //    EventBus.$emit("pauseVideo");
      // });
      this.aplayer_.on('loadeddata', () => {
        if(this.commonAttr.isAutoPlay){
          this.onPlay(true);
        }
      });

      this.setGlobalCss();
    },
    onPlayOrPause({ isPlay, isTouch = false }){
      if(isPlay){
        this.onPlay();
      }else{
        this.onPause(isTouch);
      }
    },
    onPlay(){
      if(this.pageIndex >= 0 && this.statePopId <= 0 && this.pageId == (this.pageIndex+1) || this.statePopId > 0 && this.popId == this.statePopId){
        // if(isChange){
        //   this.aplayer_.list.add([{
        //     url:  this.item.commonAttr.url,
        //   }]);
        //   this.aplayer_.list.remove(0)
        // }
        this.aplayer_ && this.aplayer_.play();
      }
    },
    onPause(isTouch){
      if(!this.commonAttr.isPageFixed || isTouch){
        this.aplayer_ && this.aplayer_.pause();
      }
    },
    onSwitchAudio(data){
      if(this.aplayer_){
        this.aplayer_.list.clear()
        this.aplayer_.list.add([
          data
        ])
        this.aplayer_.skipForward()
        this.aplayer_ && this.aplayer_.play();
      }
    },
    setGlobalCss(){
      // --aplayer-width: 100px;
      // --aplayer-height: 100px;
      // --aplayer-author-color: #fff;
      // --aplayer-author-size: 12px;
      // --aplayer-title-color: #fff;
      // --aplayer-title-size: 14px;
      // --aplayer-lrc-height: 70px
      // --aplayer-lrc-active-size: 28px;
      // --aplayer-lrc-color: #fff;
      // --aplayer-lrc-size: 12px;
      // --aplayer-lrc-current-url: '';
      // --aplayer-pic-top: 100px;
      // --aplayer-pic-display: none;
      // --aplayer-music-display: none;

      // {"lrcColor":"#fff","lrcSize":"12","lrcActiveSize":"12","lrcUrl":'',"coverWidth":"100","coverHeight":"100","authorColor":"","authorSize":"","titleColor":"","titleSize":""}
      if(this.commonAttr.params && isJSON(this.commonAttr.params)){
        let docStyle = this.$refs.aplayer.style;
        let customObj = JSON.parse(this.commonAttr.params);
        if(this.commonAttr.cover || customObj.coverWidth){
          docStyle.setProperty(`--aplayer-pic-display`, "block");
          docStyle.setProperty(`--aplayer-width`, getPxOVwByValue(customObj.coverWidth));
          docStyle.setProperty(`--aplayer-height`, getPxOVwByValue(customObj.coverHeight));
          let picTop = (this.item.conAttr.height - customObj.coverHeight)/2;
          docStyle.setProperty(`--aplayer-pic-top`, getPxOVwByValue(picTop));
        }else{
          docStyle.setProperty(`--aplayer-pic-display`, "none");
        }

        if(this.commonAttr.name || this.commonAttr.artist){
          docStyle.setProperty(`--aplayer-music-display`, "block");
          if(customObj.authorColor){
            docStyle.setProperty(`--aplayer-author-color`, customObj.authorColor);
          }
          if(customObj.authorSize){
            docStyle.setProperty(`--aplayer-author-size`, getPxOVwByValue(customObj.authorSize));
          }else{
            docStyle.setProperty(`--aplayer-author-size`, getPxOVwByValue(24));
          }
          if(customObj.titleColor){
            docStyle.setProperty(`--aplayer-title-color`, customObj.titleColor);
          }
          if(customObj.titleSize){
            docStyle.setProperty(`--aplayer-title-size`, getPxOVwByValue(customObj.titleSize));
          }else{
            docStyle.setProperty(`--aplayer-title-size`, getPxOVwByValue(28));
          }
        }else{
          docStyle.setProperty(`--aplayer-music-display`, "none");
        }

        if(this.commonAttr.lrc){
          if(customObj.lrcUrl){
            docStyle.setProperty(`--aplayer-lrc-current-url`, customObj.lrcUrl);
          }
          if(this.commonAttr.isDisplayControls){
            docStyle.setProperty(`--aplayer-lrc-height`, getPxOVwByValue(this.item.conAttr.height - 60));
          }else{
            docStyle.setProperty(`--aplayer-lrc-height`, getPxOVwByValue(this.item.conAttr.height));
          }
          if(customObj.lrcColor){
            docStyle.setProperty(`--aplayer-lrc-color`, customObj.lrcColor);
          }
          if(customObj.lrcSize){
            docStyle.setProperty(`--aplayer-lrc-size`, getPxOVwByValue(customObj.lrcSize));
          }else{
            docStyle.setProperty(`--aplayer-lrc-size`, getPxOVwByValue(24));
          }
          if(customObj.lrcActiveSize){
            docStyle.setProperty(`--aplayer-lrc-active-size`, getPxOVwByValue(customObj.lrcActiveSize));
          }else{
            docStyle.setProperty(`--aplayer-lrc-active-size`, getPxOVwByValue(28));
          }
          if(customObj.lrcAlign){
            docStyle.setProperty(`--aplayer-lrc-align`, customObj.lrcAlign);
          }
          if(customObj.lrcLineHeight){
            docStyle.setProperty(`--aplayer-lrc-line-height`, getPxOVwByValue(customObj.lrcLineHeight));
          }else{
            docStyle.setProperty(`--aplayer-lrc-line-height`, getPxOVwByValue(48));
          }
        }

        if(this.commonAttr.isMini){
          docStyle.setProperty(`--aplayer-info-display`, "none");
        }else{
          docStyle.setProperty(`--aplayer-info-display`, "block");
        }
      }
    },
    destroyAPlayer() {
      if(this.aplayer_){
        this.aplayer_.pause();
        this.aplayer_.destroy();
        this.aplayer_ = null;
        // const audios = document.getElementsByClassName("wb-audio");
        // _.forEach(audios, (audio) => {
        //   audio.innerHTML = '';
        // })
      }
    }
  },
  watch: {
    pageIndex() {
      if(this.isSwiper){
        if(this.pageIndex >= 0 && this.pageId == (this.pageIndex+1) || this.statePopId > 0 && this.popId == this.statePopId){
          this.$nextTick(() => {
            this.initAPlayer(window.APlayer);
          })
        }else{
          this.destroyAPlayer();
        }
      }
    }
  },
  beforeUnmount(){
    EventBus.$off("playOrPauseAudio", this.onPlayOrPause);
    this.destroyAPlayer();
  }
};
</script>
<style lang="scss" scope>
@import "@/assets/css/a-player.scss";
.wb-audio {
  width: inherit;
  height: inherit;
}
</style>
